    <template>
        <el-main>
            <!-- 搜索区域 -->
            <el-form :model="searchParams" :inline="true" size="default">
                <!-- <el-form-item label="订单号">
                    <el-input v-model="searchParams.orderId" placeholder="输入订单号"></el-input>
                </el-form-item> -->
                <el-form-item label="商品名称">
                    <el-input v-model="searchParams.goodsName" placeholder="输入商品名称"></el-input>
                </el-form-item>
                <!-- <el-form-item label="买家ID">
                    <el-input v-model="searchParams.buyerId" placeholder="输入买家ID"></el-input>
                </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="searchBtn">搜索</el-button>
                    <el-button icon="Refresh" @click="resetBtn">重置</el-button>
                </el-form-item>
            </el-form>

            <!-- 订单表格 -->
            <el-table :data="tableData" border stripe style="width: 100%">
                <el-table-column prop="orderId" label="订单ID"></el-table-column>
                <el-table-column prop="goodsName" label="商品名称"></el-table-column>
                <el-table-column prop="buyerNickname" label="买家昵称"></el-table-column>
                <el-table-column prop="buyerId" label="买家id"></el-table-column>
                <el-table-column prop="sellerNickname" label="卖家昵称"></el-table-column>
                <el-table-column prop="sellerId" label="卖家id"></el-table-column>
                <el-table-column prop="price" label="价格">
                    <template #default="scope">
                        ¥{{ scope.row.price }}
                    </template>
                </el-table-column>
                <el-table-column prop="createdAt" label="创建时间" width="180">
                    <template #default="scope">
                        {{ formatDate(scope.row.createdAt) }}
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="status" label="状态" width="120">
                    <template #default="scope">
                        <el-tag :type="getStatusType(scope.row.status)">
                            {{ getStatusText(scope.row.status) }}
                        </el-tag>
                    </template>
                </el-table-column> -->
                <!-- <el-table-column label="操作" width="180">
                    <template #default="scope">
                        <el-button size="small" @click="viewDetail(scope.row)">详情</el-button>
                        <el-button size="small" type="danger" @click="cancelOrder(scope.row)">取消</el-button>
                    </template>
                </el-table-column> -->
            </el-table>

            <!-- 分页 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="searchParams.currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="searchParams.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total" style="margin-top: 20px"></el-pagination>

            <!-- 订单详情对话框 -->
            <el-dialog v-model="detailVisible" title="订单详情" width="50%">
                <el-descriptions :column="2" border>
                    <el-descriptions-item label="订单ID">{{ currentOrder.orderId }}</el-descriptions-item>
                    <el-descriptions-item label="商品名称">{{ currentOrder.goodsName }}</el-descriptions-item>
                    <el-descriptions-item label="买家">{{ currentOrder.buyerName }}</el-descriptions-item>
                    <el-descriptions-item label="卖家">{{ currentOrder.sellerName }}</el-descriptions-item>
                    <el-descriptions-item label="价格">¥{{ currentOrder.price }}</el-descriptions-item>
                    <el-descriptions-item label="状态">
                        <el-tag :type="getStatusType(currentOrder.status)">
                            {{ getStatusText(currentOrder.status) }}
                        </el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="创建时间">{{ formatDate(currentOrder.createdAt) }}</el-descriptions-item>
                    <el-descriptions-item label="更新时间">{{ formatDate(currentOrder.updatedAt) }}</el-descriptions-item>
                </el-descriptions>
                <template #footer>
                    <el-button @click="detailVisible = false">关闭</el-button>
                </template>
            </el-dialog>
        </el-main>
    </template>

    <script setup>
    import { ref, reactive, onMounted } from 'vue'
    import { ElMessage, ElMessageBox } from 'element-plus'
    import { getList } from '@/api/order'

    // 搜索参数
    const searchParams = reactive({
        orderId: '',
        goodsName: '',
        buyerId: '',
        currentPage: 1,
        pageSize: 10
    })

    // 表格数据
    const tableData = ref([])
    const total = ref(0)

    // 当前选中订单
    const currentOrder = ref({})
    const detailVisible = ref(false)

    // 订单状态映射
    const orderStatus = {
        0: { text: '已取消', type: 'danger' },
        1: { text: '交易中', type: 'warning' },
        2: { text: '已完成', type: 'success' }
    }

    // 获取订单列表
    const fetchOrderList = async () => {
        try {
            const res = await getList(searchParams)
            if (res.code === 200) {
                tableData.value = res.data.records
                console.log(res.data.records)
                total.value = res.data.total
            }
        } catch (error) {
            ElMessage.error('获取订单列表失败')
        }
    }

    // 搜索按钮
    const searchBtn = () => {
        searchParams.currentPage = 1
        fetchOrderList()
    }

    // 重置按钮
    const resetBtn = () => {
        Object.assign(searchParams, {
            orderId: '',
            goodsName: '',
            buyerId: '',
            currentPage: 1,
            pageSize: 10
        })
        fetchOrderList()
    }

    // 查看详情
    const viewDetail = (row) => {
        currentOrder.value = row
        detailVisible.value = true
    }

    // 取消订单
    const cancelOrder = async (row) => {
        try {
            await ElMessageBox.confirm('确认取消该订单吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            // 这里调用取消订单的API
            ElMessage.success('订单已取消')
            fetchOrderList()
        } catch {
            ElMessage.info('已取消操作')
        }
    }

    // 分页大小改变
    const handleSizeChange = (val) => {
        searchParams.pageSize = val
        fetchOrderList()
    }

    // 当前页改变
    const handleCurrentChange = (val) => {
        searchParams.currentPage = val
        fetchOrderList()
    }

    // 格式化日期
    const formatDate = (dateString) => {
        if (!dateString) return ''
        const date = new Date(dateString)
        return date.toLocaleString()
    }

    // 获取状态文本
    const getStatusText = (status) => {
        return orderStatus[status]?.text || '未知状态'
    }

    // 获取状态标签类型
    const getStatusType = (status) => {
        return orderStatus[status]?.type || ''
    }

    // 初始化加载数据
    onMounted(() => {
        fetchOrderList()
    })
    </script>

    <style scoped>
    .el-main {
        padding: 20px;
    }

    .el-form-item {
        margin-right: 20px;
    }

    .el-table {
        margin-top: 20px;
    }
    </style>